<template>
  <Page class="bank-list">
    <!--企业开户行-->
    <div class="log-list">
      <div class="log-list-div">
        <van-search
          v-model="searchValue"
          placeholder="请输入银行名称"
          action-text="搜索"
          @input="searchBank"
        />
      </div>
    </div>
    <div class="bank-body">
      <van-cell
        v-for="(item, index) in bankList"
        clickable
        :key="index"
        :title="item.bankName"
        @click="toggle(item)"
      >
        <template #right-icon>
          <van-checkbox
            :value="item.checked"
            ref="checkboxes"
          />
        </template>
      </van-cell>
    </div>

    <!-- 底部的按钮 -->
    <div class="bank-btn">
      <van-button
        type="default"
        round
        class="bank-btn-item"
        @click="clickCancel"
      >取消</van-button>
      <van-button
        type="info"
        round
        class="bank-btn-item"
        @click="clickConfirm"
      >确定</van-button>
    </div>
  </Page>
</template>

<script>

export default {
  name: "bankList",
  components: {
  },
  data () {
    return {
      // form表单
      form: {

      },
      radio: '0',
      searchValue: '',
      selectIds: [],
    };
  },
  props: {
    bankList: {
      type: Array,
      default: function () {
        return [];
      }
    },
  },
  created () {

  },
  methods: {
    changeBox () {
      // console.log(this.selectIds, 'selectIds')
    },
    clickCancel () {
      this.$emit('cancel')
    },
    clickConfirm () {
      this.$emit('clickConfirm')
    },
    submitForm () {
      if (!this.vali.status) {
        utils.ui.confirm("提交成功");
      }
    },
    searchBank () {
      this.$emit('searchBank', this.searchValue)
    },
    toggle (item) {
      console.log(item, 'item')
      const hasSelectList = this.bankList.filter(pre=>pre.checked)
      if(hasSelectList.length > 4) {
        if(!item.checked) {
          this.$toast('最多选择五家！')
        } else {
          item.checked = !item.checked
        }
      } else {
        item.checked = !item.checked
        // console.log(item, 'item')
      }
      this.$forceUpdate()
    },
    clearValue () {
      this.searchValue = ''
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/demo/index.scss";
.bank-list {
  border-top: 1px solid rgba(255, 255, 255, 0);
  position: fixed;
  left: 0;
  top: 0;
  background: #ffffff;
  z-index: $zIndex-popup;
  overflow-y: auto;
  // border: 1px solid red;
  height: 100vh;
  padding-bottom: 90px;
}
.bank-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  // border: 1px solid red;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  // box-shadow: 0 0 0 1px rgba(131, 128, 128, 0.3);
  .bank-btn-item {
    width: 30%;
  }
}
</style>


